

$color : #bb9c7a;
@import './modules/base';
@import './modules/header';
@import './modules/footer';


.category_body{
    padding-top:120px;
    padding-bottom: 10%;
    width:100%;
    &_top{
        width:100%;
        height:auto;
        &_img{
            width: 100%;
            height:auto;
        }
    }

}
.category_body_bottom{
    width:100%;
    .bottom_wrap{
        margin-top:10px;
        margin-left:30px;
        .current_fo{
            
            color:$color;
            font-size: 14px;
            line-height:26px;
            
        }
    }

}


    .commodity_img_box{
      position: relative;
     margin-top: 30px;
      width:100%;
      height:auto;
      .paging{
        position: absolute;
        bottom: -50px;
        left: 46%;
        &>li{
          // margin-left:-50%;
          float: left;
          margin-left:7px;
          width: 20px;height:20px;
          border-radius: 50%;
          border: 2px solid $color;
          color: $color;
          text-align: center;
          font-size: 16px;
          line-height: 18px;
        }
        &>li.active,&>li:hover{
          background: $color;
          color: #fff;
        }
      }


    .commodity_ul{
      width:100%;
      height:auto;
      overflow: hidden;
      padding-bottom: 10px;
      
      &>li{
        // background:$color;
        float:left;
        position: relative;
        overflow: hidden;
        width: 350px;
        height:412px;
        margin: 0 24px;
        margin-top: 60px;
        // background:red;
      }
      .commodity_ctit1{
        overflow: hidden;
        width: 100%;
        height: 54px;
        padding-top: 30px;
        padding-bottom: 10px;
        text-align: center;
        &>a{
          display: block;
          width: 100%;
          height: 100%;
          color: $color;
          &>span:first-child{
              display: block;
              width: 60%;
              margin:0 auto;
              height: 30px;
              font-size: 18px;
              line-height: 30px;
              overflow: hidden;
              white-space:nowrap;
              text-overflow:ellipsis;
          
          }
          &>span:last-child{
            display: block;
            width: 100%;
            height: 24px;
            font-size: 12px;
            line-height: 24px;
          }
        }
      }
      .commodity_img{
       
            width:236px;
            height:232px;
            margin:0 auto;
            &>a{
              width: 100%;
              height:100%;
              display: block;
              &>img{
                width: 100%;
                height:100%;
              }
            }
          

      }
      .commodity_pricebox{
        padding-top: 40px;
        width: 100%;
        text-align: center;
        &>span{
          display: block;
          width:100%;
          height:30px;
          color:$color;
          font-size: 20px;
          line-height:30px;
          text-align: center;
        }
      
      }
    }

}
.commodity_ul li:hover{
  box-shadow: 0px -2px 30px #888888;
}
